<template>
  <div
    class="read-chapter"
    ref="chapter"
    :style="{ height: height || '100%' }"
    @scroll.stop="scrollEvent"
  >
    <div class="content" ref="content">
      <div class="chapter" v-html="chapter"></div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["source_uuid", "content_uuid", "height", "cacheList", "index"],
  data: () => {
    return {
      chapter: "",
    };
  },
  watch: {
    source_uuid() {
      this.$refs.chapter.scrollTop = 0;
      this.getChapter();
    },
    content_uuid() {
      this.$refs.chapter.scrollTop = 0;
      this.getChapter();
    },
  },
  methods: {
    scrollEvent(e) {
      console.log(e.target.scrollTop);
    },
    //更新字体
    changeFont() {
      this.chapter = this.chapter
        .replace(
          /<h1/gi,
          "<div style='font-size:0.28rem;font-weight:bold;text-indent: 0;'"
        )
        .replace(/h1>/, "div>");
    },
    //获取章节内容
    getChapter() {
      if (!this.cacheList[this.index]) {
        this.axios({
          method: "get",
          url: `${this.api.baseUrlData}/yunyuedu/reader/book/content.json?source_uuid=${this.source_uuid}&content_uuid=${this.content_uuid}`,
        }).then((res) => {
          console.log(res);
          this.chapter = res.data?.data?.content;
          this.changeFont();
          this.$emit("addCacheList", {
            chapter: this.chapter,
            index: this.index,
          });
          // this.changeFont();
        });
      } else {
        this.chapter = this.cacheList[this.index];
      }
    },
  },
  created() {
    this.getChapter();
    console.log(this.source_uuid, this.content_uuid, this.height);
  },
};
</script>

<style lang="scss" scoped>
.read-chapter {
  position: relative;
  width: 100%;
  overflow: scroll;
  &::-webkit-scrollbar {
    display: none;
  }
  .content {
    // width: max-content;
    // column-gap: 10px;
    // column-rule: 5px solid #090;
    // column-width: 355px;
  }
}
</style>